@mixin clearfix {
  &:after {
    content: "";
    display: table;
    clear: both;
  }
}

@mixin scrollBar {
  &::-webkit-scrollbar-track-piece {
    background: #d3dce6;
  }

  &::-webkit-scrollbar {
    width: 6px;
  }

  &::-webkit-scrollbar-thumb {
    background: #99a9bf;
    border-radius: 20px;
  }
}

@mixin relative {
  position: relative;
  width: 100%;
  height: 100%;
}

//激活失活状态样式
@mixin activeAndnoActive {
  &.text_active {
    color: rgba(125, 127, 142, 0.3);
    background-color: rgba(33, 192, 111, 1);
  }

  &.text_noActive {
    color: rgba(125, 127, 142, 0.3);
    background-color: rgba(125, 127, 142, 0.3);
  }

  &.txt_success {
    color: #21c06f;
  }

  &.txt_error {
    color: #d0021b;
  }

  &.txt_ing {
    color: #f5a623;
  }

  &.txt_other {
    color: #3d3c41;
  }

  &.success {
    color: #2b7bfb;
    background-color: #2b7bfb;
  }

  &.fail {
    color: #f5222d;
    background-color: #f5222d;
  }

  &.noSure {
    color: rgba(125, 127, 142, 0.3);
    background: rgba(125, 127, 142, 0.3);
  }

  &.ing {
    color: #21c06f;
    background: #21c06f;
  }

  &.btn_active {
    color: rgba(125, 127, 142, 0.3);
  }

  &.btn_noActive {
    color: rgba(125, 127, 142, 0.3);
  }

  &.up {
    color: rgb(58, 142, 230);
  }

  &.down {
    color: rgba(245, 168, 39, 1);
  }

  &.atten_up {
    background-color: rgb(58, 142, 230);
  }

  &.atten_down {
    background-color: rgba(245, 168, 39, 1);
  }

  &.noExpired {
    color: rgba(125, 127, 142, 0.3);
  }

  &.canExpired {
    color: rgba(245, 34, 45, 1);
  }
}